<template>
  <div class="dashboard-panel-detail">
    <t-row style="margin-top: 0">
      <t-col :span="12" style="margin-bottom: 0px">
        <div>
          <overTopCard :info="infoList" @setStatus="setStatus" />
        </div>
      </t-col>
      <t-col :span="7" style="padding: 0">
        <div style="margin-bottom: 24px">
          <overviewCard1 :info="infoList" @setStart="setStart" @updateUrl="updateUrl" @setStatus="setStatus" />
        </div>
        <div style="margin-bottom: 24px">
          <overviewCard4 :info="infoList" :role="store.projectRole" />
        </div>

        <overviewCard5 />
      </t-col>
      <t-col :span="5">
        <div class="right-box">
          <div style="margin-bottom: 24px">
            <overviewCard2 :info="infoList" />
          </div>

          <overviewCard3 :info="infoList" />
        </div>
      </t-col>
    </t-row>
    <!-- <t-card title="项目概况" class="dashboard-detail-card">

    </t-card> -->
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { MessagePlugin } from 'tdesign-vue-next';
import overTopCard from './components/overview/overTopCard.vue';
import overviewCard1 from './components/overview/overviewCard1.vue';
import overviewCard2 from './components/overview/overviewCard2.vue';
import overviewCard3 from './components/overview/overviewCard3.vue';
import overviewCard4 from './components/overview/overviewCard4.vue';
import overviewCard5 from './components/overview/overviewCard5.vue';
import { overview } from '@/api/project/project';
import { ref, reactive } from 'vue';
import { useProjectStore } from '@/store';

const infoList = ref({});
const store = useProjectStore();
const initInfo = async () => {
  try {
    let res = await overview(localStorage.getItem('projectId'));
    res.data.logs.forEach((element) => {
      if (element.content.indexOf('{RefName}') !== -1) {
        let arr = element.content.split('{RefName}');
        element.centerTitle = arr[0]; //element.content.replace('{RefName}', '');
        element.centerTitleright = arr[1];
      }
    });
    infoList.value = res.data;

    // console.log(infoList.value);
  } catch {}
};
const setStart = () => {
  infoList.value.isAsterisk = !infoList.value.isAsterisk;
};
const updateUrl = (e: string) => {
  infoList.value.coverUrl = e;
};
const setStatus = (e: number) => {
  infoList.value.publishStatus = e;
};
initInfo();
</script>

<style lang="less" scoped>
.dashboard-panel-detail {
  padding: 24px;
  min-width: 1352px;
}
.t-row {
  min-width: 1180x;
  margin-top: 0;
}
.t-col {
  margin-bottom: 24px;
}
.right-box {
  padding-left: 24px;
}
</style>
